<div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Admission Applicant Result</h3>
            </div>
    <div class="panel-body">
        <label>Name: </label> <?php echo $this->applicant[0]['applicantCode']?> <br />
        <label>Code: </label> <?php echo $this->applicant[0]['applicantName']?> <br />
        <label>Interview Time</label> <?php echo $this->applicant[0]['interviewTime']?> <br />
        <label>Number of Questions Asked: </label> <?php echo $this->applicant[0]['questionsNo']?> <br />
        <label>Total Grade:</label> <?php echo $this->applicant[0]['totalGrades']."/".$this->applicant[0]['questionsNo']*10?> <br />
        <label>Percentage: </label> <?php echo $this->applicant[0]['precentage']?>% <br />
        
    </div>
    <div id="categoriesResult" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
    <div id="levelsResult" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
    <div id="grades" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</div>

<?php $this->headScript()->appendFile($this->baseUrl() . "/js/highcharts.js"); ?>
<?php $this->headScript()->appendFile($this->baseUrl() . "/js/exporting.js"); ?>
<?php $this->headScript()->captureStart() ?>
$(document).ready(function () {
    	
    	// Build the chart
        $('#categoriesResult').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Questions distribution per category'
            },
            tooltip: {
        	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Category ',
                data: [
                    <?php
                        foreach ( $this->categories as $category) {
                            echo "['".$category['categoryName']."',".$category['questionsNo']."],";
                        }
                    ?>
                    
                ]
            }]
        });
        
        // Build the chart
        $('#levelsResult').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Questions distribution per level'
            },
            tooltip: {
        	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Category ',
                data: [
                    <?php
                        foreach ( $this->levels as $level) {
                            echo "['".$level['levelName']."',".$level['questionsNo']."],";
                        }
                    ?>
                    
                ]
            }]
        });
        
        $('#grades').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Grades Distribution'
            },
            
            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'No. of Questions'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: 'No. of Questions: <b>{point.y:.1f} </b>',
            },
            series: [{
                name: 'Grades',
                colorByPoint: true,
                data: [
                 <?php
                        foreach ( $this->grades as $grade) {
                            echo "['".$grade['grade']."',".$grade['questionsNo']."],";
                        }
                    ?>
                    
                ],
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
            }]
        });
    });
<?php $this->headScript()->captureEnd() ?>